<template>
  <view class="staticsGrid">
    <up-grid :border="false" col="3">
      <up-grid-item
        class="item"
        v-for="(item, index) in list"
        :key="index"
        @tap="clickItem(index)"
      >
        <view class="item-space"></view>
        <view class="item-count">{{ item.count }}</view>
        <view class="item-name">{{ item.name }}</view>
        <view class="item-space"></view>
      </up-grid-item>
    </up-grid>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
defineProps({
  list: {
    type: Array,
    default: [],
  },
});

onLoad((options) => {});

const clickItem = (index: number) => {
  emit("clickItem", index);
};

const emit = defineEmits(["clickItem"]);
</script>

<style lang="scss" scoped>
.staticsGrid {
  margin-left: 24rpx;
  margin-top: 8rpx;
  width: calc(100% - 48rpx);
  border-radius: 16rpx;
  .item {
    // #ifdef MP-WEIXIN
    padding-top: 24rpx;
    padding-bottom: 24rpx;
    // #endif
    display: flex;
    flex-direction: column;
    align-items: center;
    &-space {
      height: 24rpx;
    }
    &-count {
      font-weight: bold;
      font-size: 40rpx;
      color: #386ef5;
      line-height: 38rpx;
    }
    &-name {
      padding-top: 8rpx;
      font-size: 28rpx;
      color: #666666;
      line-height: 28rpx;
    }
  }
}
</style>
